Shiny.addCustomMessageHandler("themeriver_values", function(message) {

    var dataset = message;
    var datearray = [];
    var colorrange = [];
    
    var parseTime = d3.timeParse("%Y-%m-%d");
    var formatTime = d3.timeFormat("%d/%m/%Y");
    
    chart("orange");

    function chart(color) {

	if (color == "blue") {
	    colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
	}
	else if (color == "pink") {
	    colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
	}
	else if (color == "orange") {
	    colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
	}
	strokecolor = colorrange[0];

	var margin = {top: 24, right: 0, bottom: 0, left: 0}; // {top: 20, right: 40, bottom: 30, left: 30}
	var width = 1200; //document.body.clientWidth - margin.left - margin.right;
	var height = 500; //400 - margin.top - margin.bottom;

	/*var tooltip = d3.select("body")
	  .append("div")
	  .attr("class", "remove")
	  .style("position", "absolute")
	  .style("z-index", "20")
	  .style("visibility", "hidden")
	  .style("top", "30px")
	  .style("left", "55px");*/

	var x = d3.scaleTime()
	    .domain(d3.extent(dataset.date)) //.domain([0, m - 1])
	    .range([0, width]);

	var y = d3.scaleLinear()
	    .range([height-10, 0]);

	var z = d3.scaleOrdinal()
	    .range(colorrange);

	var xAxis = d3.axisBottom(x)
	    .tickFormat(formatTime);

	var yAxisl = d3.axisLeft(y);
	//.scale(y);

	var yAxisr = d3.axisRight(y);
	//.scale(y);

	//var stack = d3.layout.stack()
	//    .offset("silhouette")
	//    .values(function(d) { return d.values; })
	//    .x(function(d) { return d.date; })
	//    .y(function(d) { return d.value; });

	// Create series
	var stack = d3.stack()
	    .offset(d3.stackOffsetSilhouette())
	    .value(function(d) { return d.acidentes; }); // Values of each series(layer)
	    //.order(d3.stackOrderDescending); // Sort. The largest series is at the bottom
	
	var nest = d3.nest()
	    .key(function(d) { return d.uf; });	
	var area = d3.area()
	    .x(function(d, i) {return x(d.date);})
	    .y0(function(d) {return y(d[0]);})
	    .y(function(d) {return y(d[1]);})
	    .curve(d3.curveCardinal());
	
	var themeriver = d3.select("#themeriver_area").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
	for (i = 0; i < dataset.length; i++) {
	    dataset.date[i] = parseTime(dataset.date[i]);
	    //dataset.acidentes = +dataset.acidentes;
	}
	    
	var layers = stack(nest.entries(dataset));

	x.domain(d3.extent(dataset, function(d) { return d.date; }));
	y.domain([0, d3.max(dataset, function(d) { return d.y0 + d.y; })]);
	stack.keys(layers);

	themeriver.selectAll(".layer")
	    .data(layers)
	    .enter().append("path")
	    .attr("class", "layer")
	    .attr("d", function(d) { return area(d.acidentes); })
	    .style("fill", function(d, i) { return z(i); });


	themeriver.append("g")
	    .attr("class", "x axis")
	    .attr("transform", "translate(0," + height + ")")
	    .call(xAxis);

	themeriver.append("g")
	    .attr("class", "y axis")
	    .attr("transform", "translate(" + width + ", 0)")
	    .call(yAxisr);

	themeriver.append("g")
	    .attr("class", "y axis")
	    .call(yAxisl);

	themeriver.selectAll(".layer")
	    .attr("opacity", 1)
	    .on("mouseover", function(d, i) {
		themeriver.selectAll(".layer").transition()
		    .duration(250)
		    .attr("opacity", function(d, j) {
			return j != i ? 0.6 : 1; });
	    })

	    .on("mousemove", function(d, i) {
		mousex = d3.mouse(this);
		mousex = mousex[0];
		var invertedx = x.invert(mousex);
		invertedx = invertedx.getMonth() + invertedx.getDate();
		var selected = (d.values);
		for (var k = 0; k < selected.length; k++) {
		    datearray[k] = selected[k].date;
		    datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
		}

		mousedate = datearray.indexOf(invertedx);
		pro = d.values[mousedate].acidentes;

		d3.select(this)
		    .classed("hover", true)
		    .attr("stroke", strokecolor)
		    .attr("stroke-width", "0.5px"), 
		tooltip.html( "<p>" + d.uf + "<br>" + pro + "</p>" ).style("visibility", "visible");
		
	    })
	    .on("mouseout", function(d, i) {
		themeriver.selectAll(".layer")
		    .transition()
		    .duration(250)
		    .attr("opacity", "1");
		d3.select(this)
		    .classed("hover", false)
		    .attr("stroke-width", "0px"),
		tooltip.html( "<p>" + d.uf + "<br>" + pro + "</p>" )
		    .style("visibility", "hidden");
	    });
	
	var vertical = d3.select("#themeriver_area")
	    .append("div")
	    .attr("class", "remove")
	    .style("position", "absolute")
	    .style("z-index", "19")
	    .style("width", "1px")
	    .style("height", "380px")
	    .style("top", "10px")
	    .style("bottom", "30px")
	    .style("left", "0px")
	    .style("background", "#fff");

	d3.select("#themeriver_area")
	    .on("mousemove", function(){  
		mousex = d3.mouse(this);
		mousex = mousex[0] + 5;
		vertical.style("left", mousex + "px");})
	    .on("mouseover", function(){  
		mousex = d3.mouse(this);
		mousex = mousex[0] + 5;
		vertical.style("left", mousex + "px");
	    });

    };
});		

